<template>
  <div>
    <h1 ref="a">数字：{{ count }}</h1>
    <button @click="btn">点击+1 观察获取到数字是新的还是旧的</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      count: 0
    }
  },
  methods: {
    btn(){
      this.count++;
      // 立刻获取DOM中的数据
      // 获取到的是旧的数字，因为DOM渲染是异步的
      console.log(this.$refs.a.innerHTML);
      // 如何解决这个问题呢？
      // 答：vue提供了一个方法解决这个问题，就是$nextTick方法
      // 这个方法的回调函数是在DOM更新后触发，那么我们就能在这个回调函数中获取到最新的DOM
      // this.$nextTick(()=>{
      //   console.log(this.$refs.a.innerHTML);
      // })
    }
  }
}
</script>

<style>

</style>